<template>
  <div>
    <!-- 弹出层 -->
    <van-popup
      :value="value"
      @input="$emit('input',$event)"
      position="bottom"
      :style="{height:'95%'}"
      closeable
      close-icon-position="top-left"
      round
      @closed="inEdit=false"
    >
      <div class="channel">
        <div class="channel-head">
          <div>
            <span class="title">我的频道</span>
            <span class="desc">点击进入频道</span>
          </div>
          <div>
            <van-button
              type="danger"
              plain
              size="mini"
              round
              @click="isEdit=!isEdit"
            >{{isEdit?'完成':'编辑'}}</van-button>
          </div>
        </div>
        <!-- van-grid 没有设置colum-num属性，默认是4例 -->
        <van-grid class="channel-content" :gutter="10" clickable>
          <van-grid-item v-for="(item,k) in channelList" :key="item.id" @click="clkChannel(item,k)">
            <span class="text" :style="{color:k===activeChannelIndex?'red':''}">{{item.name}}</span>
            <van-icon
              v-show="k>0 && isEdit"
              class="close-icon"
              name="close"
              @click="userToRest(item,k)"
            />
          </van-grid-item>
        </van-grid>
      </div>

      <div class="channel">
        <div class="channel-head">
          <div>
            <span class="title">频道推荐</span>
            <span class="desc">点击添加频道</span>
          </div>
        </div>
        <van-grid class="channel-content" :gutter="10" clickable>
          <van-grid-item v-for="item in restChannel" :key="item.id" @click="restToUser(item)">
            <div class="info">
              <span class="text">{{item.name}}</span>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 导入获得频道的api函数：全部频道
import { apiChannelAll, apiChannelAdd, apiChannelDel } from "@/api/channel.js";
export default {
  name: "com-channel",
  computed: {
    // 获得剩余频道
    restChannel() {
      const userChannelIDs = this.channelList.map(item => {
        return item.id;
      });
      const rest = this.channelAll.filter(item => {
        return !userChannelIDs.includes(item.id);
      });
      return rest;
    }
  },
  data() {
    return {
      isEdit: false, // 是否是编辑状态
      channelAll: [] // 全部频道数据
    };
  },
  created() {
    // 获得全部频道
    this.getChannelAll();
  },
  methods: {
    // 我的频道 被单击激活
    clkChannel(channel, index) {
        if (this.isEdit && index > 0) {
            return this.userToRest(channel, index)
        }
        this.$emit('input',false)
        this.$emit('update:activeChannelIndex',index)
    },
    // 删除频道
    userToRest(channel, index) {
      this.channelList.splice(index, 1);
      apiChannelDel(channel);

      if (
        index === this.channelList.length &&
        this.activeChannelIndex === index
      ) {
        this.$emit("update:activeChannelIndex", index - 1);
      }
    },
    // 添加频道
    restToUser(channel) {
      this.channelList.push(channel);
      apiChannelAdd(channel);
    },
    // 获得"全部"频道数据
    async getChannelAll() {
      const result = await apiChannelAll();
      this.channelAll = result.channels;
    }
  },
  // 接收v-model 的数据信息
  props: {
    value: {
      type: Boolean,
      default: false
    },
    // 接收"我的频道"数据
    channelList: {
      type: Array,
      default: () => []
    },
    activeChannelIndex: {
      type: Number,
      default: 0
    }
  }
};
</script>

<style scoped lang='less'>
.channel {
  margin-top: 70px;
  .channel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    .title {
      font-size: 30px;
      margin-right: 5px;
    }
    .desc {
      font-size: 16px;
      color: gray;
    }
  }
  .channel-content {
    .text {
      font-size: 16px;
    }
    .active {
      color: red;
    }
    // 删除频道叉号图标的样式
    .close-icon {
      font-size: 20px;
      position: absolute;
      top: -5px;
      right: -5px;
      z-index: 999;
      background-color: #fff;
    }
    .info {
      display: flex;
      align-items: center;
    }
  }
}
</style>